<template>
  <div class="info-main">
    <el-row class="info-box">
      <el-col :span="8">
        <el-carousel indicator-position="outside" class="img-box-t">
          <el-carousel-item v-for="(item, index) in coverImg" :key="index" class="img-box">
            <img :src="item" alt="" style="width: 100%;height: 100%">
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="16" class="attr-box">
        <h4>{{ goodsInfo.title }}</h4>
        <ul>
          <li>
            <span class="text del-text">售价</span>
            <span class="price del-text">￥{{ goodsInfo.reserve_price }}</span>
          </li>
          <li>
            <span class="text">折扣价</span>
            <span class="price price-new">￥{{ goodsInfo.zk_final_price }}</span>
          </li>
          <li v-if="isShowCouponBox" class="coupon-price-box">
            <span class="text">卷后价</span>
            <span class="price price-new">￥{{ (goodsInfo.zk_final_price - goodsInfo.coupon_amount).toFixed(2)}} </span>
          </li>
          <li>
            <span class="text">月销</span>
            <span>{{ goodsInfo.volume }}</span>
          </li>
        </ul>
        <div class="coupon-box" v-if="isShowCouponBox">
          <p class="price">{{goodsInfo.coupon_amount}}元优惠券</p>
          <p>使用期限:{{goodsInfo.coupon_start_time}} - {{goodsInfo.coupon_end_time}}</p>
        </div>
        <el-row class="coupon-bot">
          <el-button type="danger" size="medium" class="receive" @click="receive">{{ puyText }}</el-button>
          <el-button type="warning" v-show="goodsToken" :data-clipboard-text="goodsToken" class="copyGoodsToken" size="medium" @click="copyGoodsToken">复制淘口令</el-button>
          <el-button type="success" v-show="goodsUrl" :data-clipboard-text="goodsUrl" class="copyGoodsUrl" size="medium" @click="copyGoodsUrl">复制短链接</el-button>
        </el-row>
      </el-col>
    </el-row>
    <el-divider content-position="center">相似推荐</el-divider>
    <v-like :like-item-id="goodsInfo.item_id" v-if="isShow" @goodsInfo="goodsInfoFn"></v-like>
  </div>
</template>

<script>
import { getGoodsPuyUrl, getGoodsToken } from '@/api/Goods';
import Clipboard from 'clipboard';
export default {
  name: "info",
  components: {
    'v-like': () => import("@/components/goods/like")
  },
  data() {
    return {
      goodsInfo: [],
      coverImg: [],
      isShow: true,
      isShowCouponBox: false,
      puyText: '购买',
      puyUrl: '',
      goodsToken: '', //淘口令
      goodsUrl: '', //短链接
    }
  },
  created() {
    this.goodsInfo = this.$route.query;
    console.log('info', this.goodsInfo)
    this.coverImg = this.goodsInfo.small_images;
    if(this.goodsInfo.item_url){
      this.puyUrl = this.goodsInfo.item_url;
    }
    if(this.goodsInfo.url){
      this.puyUrl = this.goodsInfo.url;
    }
    if(this.goodsInfo.coupon_share_url){
      this.isShowCouponBox = true;
      this.puyText = '领劵购买';
      this.puyUrl = this.goodsInfo.coupon_share_url
    }
  },
  mounted() {

  },
  methods: {
    goodsInfoFn(goodsInfo){
      this.goodsInfo = goodsInfo;
      this.coverImg = this.goodsInfo.small_images.string;
      this.puyUrl = this.goodsInfo.click_url;
      if(this.goodsInfo.coupon_click_url){
        this.isShowCouponBox = true;
        this.puyText = '领劵购买';
        this.puyUrl = this.goodsInfo.coupon_click_url
      }
    },
    receive(){
      window.open(this.puyUrl,'_blank')
    },
    copyGoodsUrl(){
      var clipboard = new Clipboard('.copyGoodsUrl');
      clipboard.on('success', e => {
        this.$message({
          message: '复制短链接成功',
          type: 'success'
        });
        console.log(e)
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        this.$message('复制短链接失败');
        // 不支持复制
        console.log(e)
        clipboard.destroy()
      })
    },
    copyGoodsToken(){
      var clipboard = new Clipboard('.copyGoodsToken');
      clipboard.on('success', e => {
        this.$message({
          message: '复制淘口令成功',
          type: 'success'
        });
        console.log(e)
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        this.$message('复制淘口令失败');
        // 不支持复制
        console.log(e)
        clipboard.destroy()
      })
    }
  },
  watch: {
    goodsInfo(){
      getGoodsPuyUrl({
        click_url: this.puyUrl
      }).then(res => {
        this.goodsUrl = res.url
      })
      getGoodsToken({
        text: this.goodsInfo.title,
        url: this.puyUrl,
        logo: this.goodsInfo.pict_url
      }).then(res => {
        this.goodsToken = res.token
      })
    }
  }
}
</script>

<style scoped>
.info-main{
  width: 1200px;
  margin:auto;
  padding:30px 15px;
}
.info-main .img-box,.attr-box{
  padding:15px;
  box-sizing: border-box;
  display: flex;
  flex-direction:column;
  justify-content:space-between;
}
.info-main .attr-box h4{
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
}
.info-main .attr-box ul{
  padding:10px 15px;
}
.info-main .attr-box ul span{
  font-size:14px;
  color:#666666;
  line-height: 22px;
}
.info-main .attr-box ul span.text{
  display: inline-block;
  width: 80px;
  text-align: left;
}
.info-main .attr-box ul span.price{
  color:red;
}
.info-main .attr-box ul li.coupon-price-box{
  color:red;
  font-weight: 700;
}
.info-main .attr-box ul span.price-new{
  font-size: 16px;
}
.coupon-box{
  width: 350px;
  border-radius: 3px;
  padding:5px;
  margin: 5px 0 20px 15px;
  background: linear-gradient(to right,#FF7B56,#FF283B);
  color: white;
}
.coupon-box p.price{
  font-size:18px;
  line-height: 24px;
  font-weight: 700;
}
.info-main .attr-box .del-text{
  text-decoration:line-through;
}
.info-main .coupon-bot>.receive,.copyGoodsToken,.copyGoodsUrl{
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
  0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
  0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
  transition: all 0.5s;
}
.info-main .coupon-bot>.receive,.copyGoodsToken,.copyGoodsUrl:hover{
  box-shadow: none;
}
.info-main .info-box .img-box-t{
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
  0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
  0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
  border-radius: 5px;
  padding:5px;
  transition: all 0.5s;
}
.info-main .info-box .img-box-t:hover{
  box-shadow: none;
}
</style>